.base-nav {
  position: fixed;
  z-index: 999;
  height: 100vh;
  .logo {
    width: 10rem;
  }
  .nav-item-box {
    .nav-item {
      margin-bottom: 0.75rem;
      .item-att {
        color: #6a6a6a;
        font-size: 0.85rem;
        padding-left: 0.5rem;
      }

      .item {
        width: 10rem;
        padding: 0.5rem 0;
        border-radius: 5px;
        padding-left: 0.5rem;
        transition: all 0.25s ease-in-out;
        cursor: pointer;
        transform-origin: 50% 0;

        &:hover {
          transform: skew(-15deg) scale(0.95) translate(-0.25rem, 0);
          background-color: #ff4545;
          color: white;
        }
      }

      .router-link-active {
        margin-top: 0.125rem;
        transform: skew(-15deg) scale(0.95) translate(-0.25rem, 0);
        background-color: #ff4545;
        color: white;
      }
    }
  }
}

@media(max-width: 578px) {
  .base-nav {
    display: none;
  }
}